// 获取 id 为 navList 的 ul 元素
let navList = document.getElementById("navList");

// 获取 navList 里面的 img 元素
let imgArr = navList.getElementsByTagName("img");

// 获取所有的圆点
let dotted = document.querySelector(".dotted");
let allA = dotted.getElementsByTagName("a");

// 定义一个变量来保存定时器
let timer;

// 获取左右切换按钮
let btnPrev = document.getElementById("prev");
let btnNext = document.getElementById("next");

// 定义一个变量保存当前图片的索引
let index = 0;
// 默认显示第一张图片，让圆点颜色与其相对应
allA[index].style.backgroundColor = "orange";

// 为左按钮添加单击响应事件 （图片切换为上一张）
btnPrev.onclick = function () {
  clearInterval(timer);
  index--;
  if (index < 0) {
    index = imgArr.length - 1;
  }
  toggleImgAndDot(autoPlay());
  
}

// 为右按钮添加单击响应事件 （图片切换为下一张）
btnNext.onclick = function () {
  clearInterval(timer);
  index ++ ;
  if (index > imgArr.length - 1) {
    index = 0;
  }
  toggleImgAndDot(autoPlay());
}
// 为每个圆点添加单击响应事件
for (let i = 0; i < allA.length; i++) {
  allA[i].onclick = function () {
    clearInterval(timer);
    index = i;
    toggleImgAndDot(autoPlay());
  }
}


// 自动播放图片
function autoPlay() {
  timer = setInterval(() => {
    index ++ ;
    if (index > imgArr.length - 1) {
      index = 0;
    }
    toggleImgAndDot();
  }, 2000);
}
autoPlay();
// 定义一个函数用来切换图片和圆点
function toggleImgAndDot(fn) {
  for (let i = 0; i < imgArr.length; i++) {
    allA[i].style.backgroundColor = "black";
  }
  navList.style.left = -721 * index + "px";
  allA[index].style.backgroundColor = "orange";
  fn;
}

